@page
@{ Layout = "_Layout"; }
@section Styles{
<link href="/sitefiles/assets/css/cloud.css" rel="stylesheet" type="text/css" />
<style>
  .main-wrapper {
    padding: 0 30px;
  }

  .el-upload-dragger {
    height: 240px;
    padding: 20px;
    line-height: 22px;
  }

  .mod-component-video-item .video-image {
    background: #d5d5d5;
    background-size: 60px;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 68px;
    position: relative;
    width: 120px;
  }

  .mod-component-video-item .video-image .video-image-background {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
  }

  .mod-component-video-item .video-image .video-image-play {
    color: #fff;
    left: 47px;
    opacity: .4;
    position: absolute;
    top: 22px;
    z-index: 3;
  }

  .next-icon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
  }

  .mod-component-video-item .video-image .video-image-time {
    background-image: linear-gradient(-180deg, transparent, rgba(0, 0, 0, .8));
    bottom: 0;
    color: #fff;
    height: 24px;
    line-height: 24px;
    padding: 0 3px;
    position: absolute;
    right: 0;
    text-align: right;
    width: 100%;
    z-index: 2;
    font-size: 12px;
  }

  .mod-component-video-item .video-info {
    display: block;
    padding-left: 120px;
  }

  .mod-component-video-item .video-info dl {
    margin: 0;
  }

  .mod-component-video-item .video-info dl dd {
    color: #606266;
    font-family: PingFangSC-Regular;
    line-height: 17px;
    margin-left: 8px;
  }

  .mod-component-video-item .video-info .video-info-title {
    color: #4a4a4a;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
}

<div class="main-wrapper">
  <el-tabs v-model="activeName" v-on:tab-click="btnTabsClick">
    <el-tab-pane label="免版权图库设置" name="settings"></el-tab-pane>
    <el-tab-pane label="免版权图库管理" name="images"></el-tab-pane>
  </el-tabs>

  <template v-if="activeName === 'settings'">
    <el-row :gutter="20">
      <el-col :span="18" :offset="3">
        <div style="height: 25px"></div>
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>免版权图库设置</span>
              <el-button type="primary" v-on:click="btnSubmitClick" size="small"
                style="float: right; margin-top: -5px;">
                保存设置
              </el-button>
            </div>
          </template>
          <div class="text">
            <el-switch v-model="isCloudImages" active-text="启用免版权图库"></el-switch>
            <div class="tips" style="margin-top: 10px;">
              免版权图库是 SSCMS 官方收集的可以随意使用（商用或个人使用均可），无需请求使用许可的海量高清图库
              <el-link :underline="false" href="https://sscms.com/docs/v7/handbook/clouds/images/" target="_blank"
                icon="el-icon-info">
                了解更多
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </template>
  <template v-else>
    
    <el-row>
      <el-form :inline="true" :model="formInline" size="mini">
        <el-form-item label="搜索">
          <el-input v-model="formInline.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="btnSearchClick">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="6" v-for="image in images" :key="image.id">
        <el-image
          style="width: 100%; min-height: 120px; max-height: 220px; margin-bottom: 15px; cursor: pointer;"
          :src="getSmallUrl(image)"
          v-on:click="btnImageClick(image)"
        >
          <template #error>
            <div class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </template>
          <template #placeholder>
            <el-skeleton style="width: 100%" :loading="true" animated>
              <template #template>
                <el-skeleton-item variant="image" style="width: 100%; height: 180px" />
              </template>
            </el-skeleton>
          </template>
        </el-image>
      </el-col>
    </el-row>
    
    <div v-if="isMore()" style="text-align: center">
      <el-button size="medium" type="primary" style="width: 100%" v-on:click="btnMoreClick">
        加载更多...
      </el-button>
    </div>

    <el-dialog title="选择图片" :visible.sync="dialogVisible" v-if="image">

      <div style="text-align: center">
        <el-image
          style="min-height: 120px; max-height: 220px; margin-bottom: 15px;"
          :src="getSmallUrl(image)"
        >
          <template #error>
            <div class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </template>
          <template #placeholder>
            <el-skeleton style="width: 100%" :loading="true" animated>
              <template #template>
                <el-skeleton-item variant="image" style="width: 100%; height: 180px" />
              </template>
            </el-skeleton>
          </template>
        </el-image>
      </div>

      <div v-if="image.description">
        图片备注：{{ image.description }}
        <el-divider></el-divider>
      </div>

      <el-table :data="imageData">
        <el-table-column property="type" label="类型">
          <template slot-scope="scope">
            {{ getImageType(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column property="size" label="尺寸"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-on:click="btnViewClick(scope.row.type)">查看</el-button>
            <el-button
              size="mini"
              type="primary"
              v-on:click="btnCopyClick(scope.row.type)">复制地址</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </template>

</div>

@section Scripts{
<script src="/sitefiles/assets/js/admin/clouds/images.js" type="text/javascript"></script>
}